<template>
  <div id="app">
    <parser :form-conf="formConf" ref="myForm" @submit="submitForm" @reset="resetForm"></parser>
    <el-row class="bottom">
      <el-col :span="24">
          <el-button class="make-btn" @click.native="myButton()">我的按钮</el-button>
      </el-col>
  </el-row>
  </div>
</template>

<script>
import Parser from 'form-gen-parser'
  export default {
    name: 'about',
    components: {Parser},
    created() {
      this.formConf = JSON.parse(this.formConfStr)
      this.loadFormData()
    },
    methods: {
      loadFormData() {
        this.formConf.fields.map(item => {
          var __config__ = item.__config__
          __config__.defaultValue = this.formData[item.__vModel__] ? this.formData[item.__vModel__] : __config__.defaultValue
          return item
        })
      },
      resetForm() {
        console.log('resetForm call')
        this.$refs['myForm'].resetFields()
      },
      submitForm(data) {
        console.log('submitForm call')
        console.log('submit data: ', JSON.stringify(data))
      },
      myButton() {
        console.log('myButton call')
        this.$refs['myForm'].submitForm()
      }
    },
    data() {
      return {
        formConf: null,
        formData:{
          compName: '榕汉科技（上海）有限公司',
          address: '上海市闵行区龙柏新村'
        },
        // formConf: {"fields":[{"__config__":{"label":"公司","labelWidth":null,"showLabel":true,"changeTag":true,"tag":"el-input","tagIcon":"input","required":true,"layout":"colFormItem","span":24,"xs":24,"sm":24,"md":24,"lg":24,"xl":24,"document":"https://element.eleme.cn/#/zh-CN/component/input","regList":[],"formId":"163644077638124992","renderKey":"163644077638124992","defaultValue":"hakata"},"__slot__":{"prepend":"","append":""},"placeholder":"请输入公司","style":{"width":"100%"},"clearable":true,"prefix-icon":"","suffix-icon":"","maxlength":null,"show-word-limit":false,"readonly":false,"disabled":false,"__vModel__":"compName"},{"__config__":{"label":"地址","labelWidth":null,"showLabel":true,"changeTag":true,"tag":"el-input","tagIcon":"input","required":true,"layout":"colFormItem","span":24,"xs":24,"sm":24,"md":24,"lg":24,"xl":24,"document":"https://element.eleme.cn/#/zh-CN/component/input","regList":[],"formId":"163644077736490101","renderKey":"163644077736490101"},"__slot__":{"prepend":"","append":""},"placeholder":"请输入地址","style":{"width":"100%"},"clearable":true,"prefix-icon":"","suffix-icon":"","maxlength":null,"show-word-limit":false,"readonly":false,"disabled":false,"__vModel__":"address"}],"formRef":"elForm","formModel":"formData","size":"mini","labelPosition":"right","labelWidth":100,"formRules":"rules","gutter":15,"disabled":false,"span":24,"formBtns":true,"datasourceUrl":""},
        formConfStr: '{"fields":[{"__config__":{"label":"公司","labelWidth":null,"showLabel":true,"changeTag":true,"tag":"el-input","tagIcon":"input","required":true,"layout":"colFormItem","span":24,"xs":24,"sm":24,"md":24,"lg":24,"xl":24,"document":"https://element.eleme.cn/#/zh-CN/component/input","regList":[],"formId":"163644077638124992","renderKey":"163644077638124992","defaultValue":"hakata"},"__slot__":{"prepend":"","append":""},"placeholder":"请输入公司","style":{"width":"100%"},"clearable":true,"prefix-icon":"","suffix-icon":"","maxlength":null,"show-word-limit":false,"readonly":false,"disabled":false,"__vModel__":"compName"},{"__config__":{"label":"地址","labelWidth":null,"showLabel":true,"changeTag":true,"tag":"el-input","tagIcon":"input","required":true,"layout":"colFormItem","span":24,"xs":24,"sm":24,"md":24,"lg":24,"xl":24,"document":"https://element.eleme.cn/#/zh-CN/component/input","regList":[],"formId":"163644077736490101","renderKey":"163644077736490101"},"__slot__":{"prepend":"","append":""},"placeholder":"请输入地址","style":{"width":"100%"},"clearable":true,"prefix-icon":"","suffix-icon":"","maxlength":null,"show-word-limit":false,"readonly":false,"disabled":false,"__vModel__":"address"}],"formRef":"elForm","formModel":"formData","size":"mini","labelPosition":"right","labelWidth":100,"formRules":"rules","gutter":15,"disabled":false,"span":24,"formBtns":true,"datasourceUrl":""}'
      }
    }
  }
</script>

<style>

</style>
